<template>
  <div>
    <a-button @click="queryCommandSettingAction" style="margin-bottom: 12px;"><a-icon type="sync"/>刷新</a-button>
    <a-spin :spinning="loading">
      <a-descriptions :column="3" bordered>
        <a-descriptions-item label="音量">
          {{form.volume}}
        </a-descriptions-item>
        <a-descriptions-item label="显示方式">
          {{form.displayType | dictFilter(dict.displayType)}}
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </div>
</template>

<script>
import {terminalService} from '@/services'
import {formatSize} from '@/utils/util'

export default {
  name: 'TerminalCommandSetting',
  props: {
    recordId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      form: {
        volume: undefined,
        displayType: undefined
      },
      dict: {
        displayType: []
      }
    }
  },
  filters: {
    dictFilter: (val, dictList) => {
      const dict = dictList.find(item => item.value == val)
      return dict ? dict.title : '未知'
    }
  },
  methods: {
    formatSize,
    queryCommandSettingAction() {
      this.loading = true
      const params = {
        id: this.recordId
      }
      terminalService.queryCommandSetting(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.code === 200) {
          this.form = result.data
        }
      }).finally(this.loading = false)
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getDict(JSON.stringify({code: 'TERMINAL_DISPLAY_TYPE'})).then(res => this.dict.displayType = res.data.data)
      this.queryCommandSettingAction()
    })
  }
}
</script>
<style scoped lang="less">
</style>